import QtQuick 1.0
import com.nokia.symbian 1.1
import QtMobility.gallery 1.1
import PictureItem 1.0

Page{
    id: root
    anchors.fill: parent

    property int maxNumOfImages: 4
    property int imageIndex: 0
    property variant resultType: PictureItem.Nothing
    property alias selectedModel: selectedImagesModel
    property string sheetColor: "white"
    property int imageMargin
    property string helpTextPartOne: qsTr("Number of selected images ")
    property string helpTextPartTwo: qsTr("Maximum is ")

    onResultTypeChanged: if(resultType !== PictureItem.Nothing) galleryView.model.reload();

    function removeEmptyImages(){
        imageIndex = 0;
        selectedImagesModel.clear();
        galleryView.model.reload();
    }

    ListModel{
        id: selectedImagesModel        
    }

    Component{
        id: thumbnailDelegate

        Rectangle {
            id: thumbnailDelegateRectangle
            width: galleryView.cellWidth
            height: galleryView.cellHeight
            color: "transparent"
            radius: 10
            property int galleryIndex: index
            state: "removed"

            Image {
                id: itemImage
                source: url
                sourceSize.height: parent.height
                sourceSize.width: parent.width
                anchors.fill: parent
                anchors.margins: 5
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter                
                asynchronous: true
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {                    

                    var found = -1;
                    for(var i=0;i<selectedImagesModel.count;i++){
                        if(selectedImagesModel.get(i).galleryIndex === index){
                            found = i
                        }
                    }

                    if(found>-1){
                        selectedImagesModel.remove(found);
                        imageIndex--                        
                        thumbnailDelegateRectangle.state = "removed"
                    }else{
                        if(imageIndex<maxNumOfImages){
                            selectedImagesModel.append({"url":itemImage.source,"galleryIndex":index,"imageOpacity":1});
                            thumbnailDelegateRectangle.state = "clicked"                            
                            imageIndex++
                        }
                    }
                    if(textTimer.running)
                        textTimer.restart();
                    else
                        textTimer.start();
                }
            }

            states: [
                State{
                    name:"clicked"
                    PropertyChanges {
                        target: thumbnailDelegateRectangle
                        color: "lightsteelblue"
                    }
                },
                State{
                    name: "removed"                    
                    PropertyChanges {
                        target: thumbnailDelegateRectangle
                        color: "transparent"
                    }
                }
            ]

            transitions: [
                Transition {
                    to: "*"
                    ColorAnimation { target: thumbnailDelegateRectangle; duration: 200; }
                }
            ]            

            GridView.onAdd: NumberAnimation { target: thumbnailDelegateRectangle; property: "scale"; from: 0.0; to: 1.0; easing.type: Easing.OutQuad }
        }
    }

    Rectangle{
        id: statusRect
        parent: galleryView
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.leftMargin: 10
        anchors.rightMargin: 10
        anchors.topMargin: 5
        radius: 10
        color: "steelblue"
        height: statusText.height+5
        opacity: 0

        Text{
            id: statusText
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            anchors.margins: 10
            color: "white"
            font.bold: true
            wrapMode: Text.WordWrap
            opacity: parent.opacity
        }

        transitions: Transition {
            NumberAnimation{ property: "opacity"; duration: 200; }
        }

        states:[
            State{
                name: "visible"
                PropertyChanges {
                    target: statusRect
                    opacity: 1
                }
            },
            State{
                name: "hidden"
                PropertyChanges {
                    target: statusRect
                    opacity: 0
                }
            }
        ]
    }

    Timer{
        id: textTimer
        interval: 2000

        triggeredOnStart: true

        onTriggered: {
            statusText.text = helpTextPartOne+selectedImagesModel.count+"\n"+helpTextPartTwo+maxNumOfImages
            statusRect.state = "visible"
        }

        onRunningChanged: {
            if(!running)
                statusRect.state = "hidden"
        }
    }

    GridView{
        id: galleryView
        anchors.fill: parent

        delegate: thumbnailDelegate
        focus: true

        model: DocumentGalleryModel{
            rootType: DocumentGallery.Image
            autoUpdate: true
            properties: ["url","created","dateTaken","lastModified"]
            sortProperties: ["created","dateTaken","lastModified"]
        }

        cellWidth: (width/3)-0.5
        cellHeight: cellWidth
    }

    function clear(){
        imageIndex = 0;
        selectedImagesModel.clear();
        galleryView.model.clear();
        resultType = PictureItem.Nothing
    }

    function createResult(){
        if(selectedImagesModel.count){
            picturePlugin.imageType = resultType
            if(resultType === PictureItem.Tile2by2){
                picturePlugin.background = root.sheetColor                

                var imgcount = maxNumOfImages-selectedImagesModel.count;
                var ind = 0;

                for(var highInd=0;highInd<selectedImagesModel.count;highInd++){
                    if(ind<selectedImagesModel.get(highInd).galleryIndex)
                        ind = selectedImagesModel.get(highInd).galleryIndex;
                }
                ind+=1;

                for(var i=0;i<imgcount;i++){
                    selectedImagesModel.append({"url":picturePlugin.emptyImage,"galleryIndex":ind+i,"emptyImage":1,"imageOpacity":0});
                }

                for(var co=0;co<selectedImagesModel.count;co++){
                    console.log("url         : "+selectedImagesModel.get(co).url)
                    console.log("galleryIndex: "+selectedImagesModel.get(co).galleryIndex)
                    console.log("emptyImage  : "+selectedImagesModel.get(co).emptyImage)
                }

                pageStack.push(tileResult,{model: selectedImagesModel,
                                   maxNumOfImages: maxNumOfImages,
                                   sheetColor: root.sheetColor,
                                   imageMargin: root.imageMargin
                               } );
            }else if(resultType === PictureItem.Side || resultType === PictureItem.UpDown){
                pageStack.push(listResult,{model: selectedImagesModel,
                                   maxNumOfImages: maxNumOfImages,
                                   sheetColor: root.sheetColor,
                                   //resultType: root.resultType,
                                   imageMargin: root.imageMargin
                               } );
            }
        }else{
            errorDialog.fromGallery = true
            errorDialog.title = qsTr("Error occured");
            errorDialog.text = qsTr("Select at least one image")
            errorDialog.open();
        }
    }
}
